<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
</head>

<body>
    <div id="root1"></div>
    <div id="root2"></div>
    <script type="text/babel">
        class ChangeProps1 extends React.Component {
            constructor(props) {
                super(props);
                this.handleClick = this.handleClick.bind(this);
            }
            handleClick() {
                this.props.value += 1;
            }
            render() {
                return (
                    <div>
                        <h1>value = {this.props.value}</h1>
                        <button onClick={this.handleClick}>
                            Click me! Change props!
                        </button>
                    </div>
                )
            }
        }

        class ChangeProps2 extends React.Component {
            constructor(props) {
                super(props);
            }
            render() {
                let num = this.props.value;
                num += 2;
                return (
                    <h1>value = {num}</h1>
                )
            }
        }

        ReactDOM.render(<ChangeProps1/>, document.getElementById('root1'))
        ReactDOM.render(<ChangeProps2 value={2}/>, document.getElementById('root2'))
    </script>
</body>

</html>

<!-- 
    props.value 是 read-only 的 
    只是负责信息数据的传输，负责由上到下的通信
    
    state同样也是对数据进行管理的，只不过props侧重于传输这个过程
    state侧重于一个组件内部的数据状态
-->